<script setup>
import axios from "@/axios/index.js";
import {Plus} from "@element-plus/icons-vue";
import {defineEmits, defineModel} from "@vue/runtime-core";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

let updateDialog = defineModel('updateDialog')
const emit = defineEmits(['loadTableData'])
const formRef = ref()

let props = defineProps(['rowData'])
//console.log(props.rowData);
let formData = reactive({
  id: props.rowData.id,
  className: props.rowData.className,
  staffId: props.rowData.staffId,
  teacherId: props.rowData.teacherId,
  subjectId: props.rowData.subjectId,
  startDate: props.rowData.startDate,
  endDate: props.rowData.endDate
})

let staffList = reactive([])
//获取教员列表
axios.post(`/staff/selectAll?current=${0}&size=${0}`).then(resp => {
  //console.log(resp.data.data.data)
  for (let i = 0; i < resp.data.data.data.length; i++) {
    let staffItem = resp.data.data.data[i].staff
    // console.log(staffList.value.length)
    staffList.push({
      label: staffItem.realName,
      value: staffItem.id,
    })
  }
})

let subjectList = reactive([])
//获取学科列表
axios.get('/api/v1/admin/subject').then(resp => {
  //console.log(resp.data.data)
  for (let i = 0; i < resp.data.data.length; i++) {
    let subjectItem = resp.data.data[i]
    subjectList.push({
      label: subjectItem.subjectName,
      value: subjectItem.id,
    })
  }
})

//保存数据
function save() {
  if(formData.staffId === formData.teacherId) {
    ElMessage({
      type:'error',
      message:'教员与班主任不能为同一个人'
    })
    return
  }
  axios.put(`/api/v1/class/update?className=${props.rowData.className}`, formData, {
    headers: {
      "Content-Type": "application/json"
    }
  }).then(resp => {
    ElMessage({
      message: resp.data.message,
      type: 'success',
      duration: 1500,
      onClose: function () {
        emit('loadTableData')
        updateDialog.value = false
        //清除表单数据
        formData = {}
      }
    })
  }).catch(error => {})
}

//表单校验
const formRules = reactive({
  className: [
    {required:true,message: "请输入班级名称", trigger: 'blur'},
    {min:2,max:10,message: "班级名为2~10位非空字符"},
    {pattern: '^[a-zA-Z][a-zA-Z0-9]{5,9}$', message:'第一个字符为字母其余为数字',trigger:'blur'}
  ],
  staffId:[{required:true,message:'教员不能为空',trigger:'blur'}],
  subjectId:[{required:true,message:'学科不能为空',trigger:'blur'}],
  teacherId:[{required:true,message:'班主任不能为空',trigger:'blur'}]
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      save()
    }
  })
}

//重置表单校验
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <el-dialog v-model="updateDialog" title="班级修改" width="450" height="550">
    <el-form :inline="true" label-width="auto" class="demo-form-inline" ref="formRef" :rules="formRules"
             :model="formData">
      <el-form-item label="班级名" prop="className" label-width="80" style="width: 276px" :required="true">
        <el-input placeholder="输入班级名称" autocomplete="off" v-model="formData.className"/>
      </el-form-item>
      <el-form-item label="教员:" label-width="80" style="width: 276px" :required="true">
        <el-select placeholder="请输入教员ID" v-model="formData.staffId">
          <el-option
              v-for="item in staffList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任:" style="width: 276px" :required="true">
        <el-select v-model="formData.teacherId" placeholder="请输入班主任ID">
          <el-option
              v-for="item in staffList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学科:" style="width: 276px" :required="true">
        <el-select placeholder="请选择学科" v-model="formData.subjectId">
          <el-option
              v-for="item in subjectList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开班日期" label-width="80" prop="startDate">
        <el-date-picker v-model="formData.startDate"
            autocomplete="off"
            type="date" placeholder="选择日期"
            size="default"
            :editable="false"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结业日期" label-width="80" prop="endDate">
        <el-date-picker v-model="formData.endDate"
            autocomplete="off"
            type="date" placeholder="选择日期"
            size="default"
            :editable="false"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialog = false">关闭</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
        <el-button @click="submitForm(formRef)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.demo-form-inline {
  margin-left: 30px;
  text-align: center;
}

.demo-form-inline el-input {
  --el-input-width: 250px;
}

.demo-form-inline el-radio-group {
  --el-input-width: 250px;
}

.demo-form-inline el-date-picker {
  --el-input-width: 250px;
}
</style>